<template>
  <div>
    <el-table :data="list" border style="width: 100%">
      <el-table-column fixed prop="bid" label="编号" />
      <el-table-column fixed prop="ename" label="采购人姓名" />
      <el-table-column fixed prop="pname" label="采购商品名" />
      <el-table-column fixed prop="count" label="采购数量"/>
      <el-table-column fixed prop="time" label="采购时间"/>
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <el-tag>{{ scope.row.state == 1 ? '已审批':'未审批' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-edit" @click="editInfo(scope.row)">审批</el-button>
          <el-button type="text" size="small" icon="el-icon-edit" @click="addInfo()"  :style="{ display: visibleLine }">采购</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="formData">
        <el-form-item label="编号" :label-width="formLabelWidth" >
          <el-input v-model="formData.bid" :disabled="true"/>
        </el-form-item>
        <el-form-item label="采购人姓名" :label-width="formLabelWidth">
          <el-input v-model="formData.ename" :disabled="true"/>
        </el-form-item>
        <el-form-item label="采购商品名" :label-width="formLabelWidth">
          <el-input v-model="formData.pname" :disabled="true"/>
        </el-form-item>
        <el-form-item label="采购数量" :label-width="formLabelWidth">
          <el-input v-model="formData.count" :disabled="true"/>
        </el-form-item>
        <el-form-item label="采购时间" :label-width="formLabelWidth">
          <div class="block">
            <el-date-picker v-model="formData.time" type="date" :disabled="true"/>
          </div>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio-group v-model="formData.state">
            <el-radio label="已审批" value="1"/>
            <el-radio label="未审批" value="0"/>
          </el-radio-group>
<!--          <el-switch v-model="delivery"></el-switch>-->
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submits()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Buy',
  data () {
    return {
      list: [],
      title: '添加用户',
      dialogFormVisible: false,
      formLabelWidth: '120px',
      formData: {},
      delivery: 1,
      visibleLine: 'none'
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.$http.get('http://localhost:8081/buy/list').then(data => {
        this.list = data
        console.log(data[0].state)

        for (var i = 0; i < data.length; i++) {
          if (data[i].state == 1) {
            this.visibleLine = ''
          } else {
            this.visibleLine = 'none'
          }
        }
      })
    },
    editInfo (rowInfo) {
      this.dialogFormVisible = true
      this.formData = rowInfo
      this.title = '审批'
    },
    submits () {
      this.$http.get('http://localhost:8081/buy/update', {params: this.formData}).then(data => {
        console.log(data)
        if (data === true) {
          this.$message.success('修改成功')
          this.getList()
          this.dialogFormVisible = false
        } else {
          this.$message.error('修改失败')
          this.dialogFormVisible = false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
